<template>
  <div class="box">
    <div class="leftItem data-item">
      <!-- 游客信息 -->
      <div class="center-top-num-flex">
        <div class="item">
          <div class="text">当日滑雪人次</div>
          <div class="num">{{numDay}}</div>
        </div>
        <!-- <div class="item">
          <div class="text">男女比例</div>
          <div class="num">2:1</div>
        </div> -->
      </div>
      <div class="data-foot-line"></div>
    </div>
    <div class="leftItem1 data-item" style="margin-top: 20px">
      <div class="tc">客源地TOP10</div>
      <div class="tab">
        <span class="tabs1">序号</span>
        <!-- <span class="tabs2">姓名</span> -->
        <span class="tabs3">地区名称</span>
        <!-- <span class="tabs4">购买数量</span> -->
      </div>
      <div class="tabC">
        <vue-seamless-scroll :data="textList" class="seamless-warp" :class-option="defaultOption">
          <ul class="item">
            <li v-for="(item, index) in textList" :key="index" class="tab">
              <span class="tabs1">{{ item.title }}</span>
              <!-- <span class="tabs2">{{ item.title }}</span> -->
              <span class="tabs3">{{ item.name }}</span>
              <!-- <span class="tabs4">{{ item.num }}</span> -->
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="data-foot-line"></div>
    </div>
    <div class="leftItemB data-item" style="margin-top: 20px">
      <div class="tc">性别占比</div>
      <div id="chart-left-4" style="height: calc(100% - 30px);width:50%; padding: 0 20px;margin:0 auto;"></div>
      <div class="data-foot-line"></div>
    </div>
  </div>
</template>
<script>
let echarts = require("echarts");
import { chartResortSex, aDlist } from "../../bigdata/chart-options";
export default {
  data() {
    return {
      textList: aDlist.data.slice(0, 10),
      numDay: 0,
      newDate: this.formatLongDate(new Date()).slice(0, 10),
      rowData:new Object(),
      time:"",
      defaultOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
    };
  },
  mounted() {
    this.getNum();
    this.init();
    this.fooPostcurs2();
    this.fooPost2();
    this.time = setInterval(() => {
      this.getNum();
      this.fooPostcurs2();
      this.fooPost2();
   }, 10000);
  },
  beforeDestroy () {
    if(this.time!=''){
      clearInterval(this.time) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init() {
      let $chartLeft4 = echarts.init(document.getElementById("chart-left-4"));
      $chartLeft4.setOption(chartResortSex);
      $chartLeft4.resize();
    },
    formatLongDate(date) {
      let myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();
      let myHour = date.getHours();
      let myMin = date.getMinutes();
      let mySec = date.getSeconds();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      if (myHour < 10) {
        myHour = "0" + myHour;
      }
      if (myMin < 10) {
        myMin = "0" + myMin;
      }
      if (mySec < 10) {
        mySec = "0" + mySec;
      }
      return (
        myyear +
        "-" +
        mymonth +
        "-" +
        myweekday +
        " " +
        myHour +
        ":" +
        myMin +
        ":" +
        mySec
      );
    },
    

    // 客源地分析
    fooPost2() {
      let that = this;
      let url = "https://sr.boss.i-town.cn/kuaibao/tourists/source/by/phone";
      //第一步：创建需要的对象
      var httpRequest = new XMLHttpRequest();
      //第二步：打开连接 /***发送json格式文件必须设置请求头 ；如下 - */
      httpRequest.open("POST", url, true);
      //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
      httpRequest.setRequestHeader("Content-type", "application/json");
      const obj = {
        date: this.newDate,
      };
      httpRequest.send(JSON.stringify(obj)); //发送请求 将json写入send中sss
      httpRequest.onreadystatechange = function () {
        //请求后的回调接口，可将请求成功后要执行的程序写在其中
        if (httpRequest.status === 200) {
          //验证请求是否发送成功
          var json = JSON.parse(httpRequest.responseText); //获取到服务端返回的数据
          if (json.data.length != 0) {
            that.textList = json.data.slice(0, 10);
            console.log(that.textList,'that.textList');
          }
        }
      };
    },
    // 男女比例
    fooPostcurs2() {
      let that = this;
      let url = "https://sr.boss.i-town.cn/kuaibao/typeProportion";
      //第一步：创建需要的对象
      var httpRequest = new XMLHttpRequest();
      //第二步：打开连接 /***发送json格式文件必须设置请求头 ；如下 - */
      httpRequest.open("POST", url, true);
      //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
      httpRequest.setRequestHeader("Content-type", "application/json");
      const obj = {
        date: this.newDate,
      };
      httpRequest.send(JSON.stringify(obj)); //发送请求 将json写入send中sss

      httpRequest.onreadystatechange = function () {
        //请求后的回调接口，可将请求成功后要执行的程序写在其中
        if (httpRequest.status === 200) {
          //验证请求是否发送成功
          //alert("post接口请求成功 ok")
          var json = httpRequest.responseText; //获取到服务端返回的数据
          // localStorage.setItem("listSex", json);
          // 男
          let res = JSON.parse(json);
          chartResortSex.series[0].data[0].value = res.sex[0].value;
          // 女
          chartResortSex.series[0].data[1].value = res.sex[1].value;
          that.init();

          // chartLeft4.series[0]
        }
      };
    },
    getNum() {
      this.http
        .get("api/Kuaibao_large_screen_data/GetFLRealTimes")
        .then((res) => {
          if (res.data.length != 0) {
            let obj = JSON.parse(res.data.result)
            this.numDay=obj.Result.RealTimes || 0
          } 
        });
    },
  },
};
</script>
<style scoped lang="less">
.box {
  height: 95%;
  margin-top: 10px;
  .leftItem {
    position: relative;
    width: 100%;
    height: 21%;
    background: hsla(0, 0%, 100%, 0.04);
    padding: 20px 0;
    overflow: hidden;
    .center-top-num-flex {
      height: 80px;
      padding-top: 10px;
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        .text {
          color: #fcf0d8;
          font-size: 18px;
        }
        .num {
          font-size: 36px;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
            Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
            sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
          font-weight: bold;
          color: #67caca;
        }
      }
    }
    /*最外层透明*/
    /deep/ .el-table,
    /deep/ .el-table__expanded-cell {
      background-color: transparent;
      color: #fff;
    }
    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
      background-color: transparent;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 0;
    }
  }
  .leftItem1 {
    position: relative;
    width: 100%;
    height: 43%;
    background: hsla(0, 0%, 100%, 0.04);
    padding: 10px;
    overflow: hidden;
    .tab {
      display: flex;
      color: #fff;
      line-height: 30px;
      span {
        display: block;
        text-align: center;
      }
      .tabs1 {
        width: 50%;
      }
      // .tabs2 { width: 30%; }
      .tabs3 {
        width: 50%;
      }
      .tabs4 {
        width: 30%;
      }
    }
    .tabC {
      overflow: hidden;
      height: calc(100% - 60px);
      .seamless-warp {
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .leftItemB {
    position: relative;
    width: 100%;
    height: 30%;
    text-align: center;
    background: hsla(0, 0%, 100%, 0.04);
    padding: 10px;
    overflow: hidden;
  }
  .tc {
    text-align: center;
    background-color: #335f88;
    width: 106%;
    margin-left: -10px;
    margin-top: -10px;
    font-size: 13px;
    line-height: 26px;
    margin-bottom: 4%;
  }
}
</style>
